<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Data Display</title>
    <style>
        body {
            display: flex;              /* 启用 flexbox 布局 */
            flex-direction: column;     /* 垂直排列 */
            justify-content: center;    /* 垂直居中 */
            align-items: center;        /* 垂直居中 */
            min-height: 100vh;          /* 页面最小高度为 100vh，即页面高度等于浏览器窗口高度 */
            margin: 0;                  /* 为页面顶部和底部添加外边距，使其下方留出空白 */
            padding-bottom: 100px;      /* 为页面底部添加内边距，增加空白区域 */
        }

        .select-container {
            text-align: center;             /* 居中 */
            width: 100%;                    /* 确保下拉框容器占满宽度 */
            font-size: 40px;                /* 字体变大，可根据需要调整具体数值 */           
            margin-top: 10px;               /* 与上方元素（这里是<form>）有一行的距离 */
            margin-bottom: 1em;             /* 与下方元素（这里是<table>）有两行的距离 */
        }

        /* 为 select 元素和 input 元素设置字体大小 */
        select,
        input {
            font-size: 40px;              /* 字体变大，可根据需要调整具体数值 */
        }

        table {
            border-collapse: collapse;      /* 合并边框 */
            width: 60%;                     /* 表格宽度为 60% */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);    /* 阴影 */
            margin-bottom: 50px; /* 为表格底部添加外边距，使其下方留出空白 */
        }

        th,
        td {
            border: 1px solid #ddd;       /* 边框 */
            padding: 8px;                   /* 内边距 */
            text-align: left;              /* 左对齐 */
        }

        tr {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        tr>td:first-child,
        th:first-child {
            width: 5%;
            min-width: 50px;
            text-align: center;
        }

        tr>td:nth-child(2),
        th:nth-child(2) {
            width: 15%;
            min-width: 150px;
            text-align: center;
        }

        tr>td:nth-child(3),
        th:nth-child(3) {
            width: 70%;
            min-width: 200px;
            text-align: center;
        }

        tr>td:nth-child(4),
        th:nth-child(4) {
            width: 10%;
            min-width: 100px;
            text-align: center;
        }

        tr:nth-child(odd) {
            background-color: #add8e6;
        }

        tr:nth-child(even) {
            background-color: #ffcccc;
        }

        thead {
            position: sticky;
            top: 0;
            background-color: white;
            z-index: 1;
        }

                /* 回到顶部按钮的样式 */
        #back-to-top {
            position: fixed;
            right: 8%;
            top: 50%;
            transform: translateY(-50%);
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: none; /* 初始时隐藏按钮 */
        }

        #back-to-top:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div class="select-container">
        <form action="/query" method="post">
            <select name="table_name">
                <option value="_15mm_Net_data" {% if selected_table_name == '_15mm_Net_data' %}selected{% endif %}>_15mm_Net_data</option>
                <option value="_15mm_Net_400K24Kdata" {% if selected_table_name == '_15mm_Net_400K24Kdata' %}selected{% endif %}>_15mm_Net_400K24Kdata</option>
                <option value="_ma60mm_Net_400K24Kdata" {% if selected_table_name == '_ma60mm_Net_400K24Kdata' %}selected{% endif %}>_ma60mm_Net_400K24Kdata</option>
                <option value="_model_ma60mmDNN80K24k" {% if selected_table_name == '_model_ma60mmDNN80K24k' %}selected{% endif %}>_model_ma60mmDNN80K24k</option>
                <!-- 可根据需要添加更多选项 -->
            </select>
            <input type="submit" value="查询">
        </form>
    </div>
    <table>
        <thead>
            <tr>
                <th>行号</th>
                <th>时间</th>
                <th>预测K线</th>
                <th>收盘价</th>
            </tr>
        </thead>
        <tbody>
            {% for index in range(data|length) %}
            <tr>
                <td>{{ index + 1 }}</td>
                <td>{{ data[index][0] }}</td>
                <td>{{ data[index][1] }}</td>
                <!--
                <td><pre style="font-size: 18px;">{{ data[index][1] | replace('], [', ']\n[') }}</pre></td>
                -->
                <td>{{ data[index][2] }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- 回到顶部按钮 -->
    <button id="back-to-top">回到顶部</button>

    <script>
        // 当页面滚动时，显示或隐藏回到顶部按钮
        window.onscroll = function() {
            var button = document.getElementById('back-to-top');
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                button.style.display = 'block';
            } else {
                button.style.display = 'none';
            }
        };

        // 点击按钮时，回到页面顶部
        document.getElementById('back-to-top').addEventListener('click', function() {
            document.body.scrollTop = 0; // 对于 Safari
            document.documentElement.scrollTop = 0; // 对于 Chrome, Firefox, IE 和 Opera
        });
    </script>


</body>

</html>